<script setup lang="ts">
import { onMounted, ref } from 'vue'

const statusBarHeight = ref()
const titleBarHeight = ref()
const tabbarHeight = ref(0)

onMounted(async () => {
    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight || 0
    titleBarHeight.value = systemInfo.titleBarHeight || 0
    tabbarHeight.value = 750 / uni.getSystemInfoSync().pixelRatio * 0.35
    // #ifdef MP-ALIPAY
    my.setNavigationBar({
        frontColor: '#ffffff',
        backgroundColor: '#ffffff',
    })
    // #endif
})
</script>

<template>
    <view class="h-screen flex flex-col bg-primary">
        <view class="set-bg" />
        <!-- statusbar占位 -->
        <view class="flex-shrink-0">
            <CustomTitlePlaceholder />
        </view>
        <!-- content -->
        <view class="flex-1">
            <slot />
        </view>
        <!-- tabbar占位 -->
        <view class="flex-shrink-0 pb-safe-20rpx">
            <view :style="{ paddingBottom: `${tabbarHeight}rpx` }" />
        </view>
    </view>
</template>

<style scoped>
.set-bg {
    background: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager363631e9-06ab-476d-890f-a9978e34dd83.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
.set-status-bar-height {
    bottom: calc(var(--window-bottom) + 10rpx);
}
</style>
